<!--
  Override the default favicon used in the Storybook in the browser tab.
 -->
<link rel="shortcut icon" href="https://www.microsoft.com/design/fluent/assets/favicons/favicon-192.png" />
<link
  rel="icon"
  type="image/png"
  href="https://www.microsoft.com/design/fluent/assets/favicons/favicon-192.png"
  sizes="192x192"
/>
<link href="/shell.css" rel="stylesheet" />

<!-- Primary meta tags -->
<meta name="title" content="Fluent UI React" />
<meta
  name="description"
  content="Fluent UI React Components is a set of UI components and utilities resulting from an effort to converge the set of React based component libraries in production today: @fluentui/react and @fluentui/react-northstar."
/>

<!-- Open Graph -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://react.fluentui.dev/" />
<meta property="og:title" content="Fluent UI React" />
<meta
  property="og:description"
  content="Fluent UI React Components is a set of UI components and utilities resulting from an effort to converge the set of React based component libraries in production today: @fluentui/react and @fluentui/react-northstar."
/>
<meta property="og:locale" content="en_US" />
<meta property="og:image" content="https://react.fluentui.dev/fluentui-banner-meta.png" />
<meta property="og:image:width" content="1207" />
<meta property="og:image:height" content="705" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:alt" content="Fluent UI React v9 banner" />

<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image" />

<!--
  Override the default styles used in the Storybook svg icons for the left tree panel.

  @see https://storybook.js.org/docs/react/configure/theming#css-escape-hatches

  > 💡 NOTE:
  >
  > This is brittle way for providing custom non thenable styles for manager UI
  >
  > Those selectors might change on any storybook version bump.
 -->

<style>
  @font-face {
    font-family: 'Segoe UI';
    src: local('Segoe UI Light'),
      url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/light/latest.woff2) format('woff2'),
      url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/light/latest.woff) format('woff'),
      url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/light/latest.ttf) format('truetype');
    font-weight: 100;
  }

  @font-face {
    font-family: 'Segoe UI';
    src: local('Segoe UI Semilight'),
      url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/semilight/latest.woff2) format('woff2'),
      url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/semilight/latest.woff) format('woff'),
      url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/semilight/latest.ttf) format('truetype');
    font-weight: 200;
  }

  @font-face {
    font-family: 'Segoe UI';
    src: local('Segoe UI'),
      url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/normal/latest.woff2) format('woff2'),
      url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/normal/latest.woff) format('woff'),
      url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/normal/latest.ttf) format('truetype');
    font-weight: 400;
  }

  @font-face {
    font-family: 'Segoe UI';
    src: local('Segoe UI Semibold'),
      url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/semibold/latest.woff2) format('woff2'),
      url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/semibold/latest.woff) format('woff'),
      url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/semibold/latest.ttf) format('truetype');
    font-weight: 600;
  }

  @font-face {
    font-family: 'Segoe UI';
    src: local('Segoe UI Bold'),
      url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/bold/latest.woff2) format('woff2'),
      url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/bold/latest.woff) format('woff'),
      url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/bold/latest.ttf) format('truetype');
    font-weight: 700;
  }

  #storybook-explorer-searchfield {
    font-weight: 400 !important;
    font-size: 14px !important;
    letter-spacing: -0.01em !important;
    line-height: 14px !important;
  }

  .sidebar-item svg,
  .sidebar-svg-icon {
    color: #11100f !important;
  }

  .sidebar-item[data-selected='true'] svg,
  .sidebar-item[data-selected='true'] .sidebar-svg-icon {
    color: #ffffff !important;
  }

  .sidebar-subheading {
    font-weight: 600 !important;
    font-size: 16px !important;
    letter-spacing: 0px !important;
    line-height: 24px !important;
    text-transform: none !important;
    color: #11100f !important;
  }

  .sidebar-item {
    font-weight: 400 !important;
    font-size: 14px !important;
    letter-spacing: -0.01em !important;
    line-height: 14px !important;
    color: #11100f !important;
  }

  .sidebar-item[data-selected='true'] {
    font-weight: 600 !important;
    font-size: 14px !important;
    letter-spacing: -0.01em !important;
    line-height: 14px !important;
    color: #ffffff !important;
  }

  /*
  * Hides "Addons" button from mobile view nav.
  */
  nav > button:last-child {
    display: none;
  }

  /*
  Storybook has proposed a feature for this in https://github.com/storybookjs/storybook/issues/9209
  which will configure stories to exist in deeplink URL format, but do not appear in the nav tree or the docs page
  Usign suggested temporary workaround until storybook gets proper support
  See https://github.com/microsoft/fluentui/blob/master/rfcs/convergence/authoring-stories.md#10-internal-stories-for-testing
  */
  [id*='accessibility-stories'] {
    display: none !important;
  }
</style>
